<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <s:include value="template/header.jsp"/>
    <body>
        <s:include value="template/nav.jsp"/>

        <div class="main-container container-fluid">
            <a class="menu-toggler" id="menu-toggler" href="#">
                <span class="menu-text"></span>
            </a>
            <s:include value="template/sliderbar.jsp"/>
            <div class="main-content">
                <s:include value="template/navsearch.jsp"/>
                <div class="page-content">
                    <div class="row-fluid">
                        <div class="span12">
                            <!--PAGE CONTENT BEGINS-->


                            <h3 class="header smaller lighter blue">Category Report</h3>                              


                            <form action="showCategoryReport" method="get">
                                <table id="sample-table-1" class="table table-striped table-bordered table-hover">

                                    <thead>
                                        <tr>
                                            <td>
                                                <select name="comp.cateId" onchange="showCategoryReport">
                                                    <option value=""><span style="font-style: italic">Choose a Category...</span></option>

                                                    <c:forEach var="c" items="${listCate}">
                                                        <option value="${c.id}" <c:if test="${c.id==comp.cateId}" > selected="true"  </c:if>  >${c.cateName}</option>
                                                    </c:forEach>

                                                </select>
                                            </td>
                                            <td>
                                                <button class="btn btn-info" type="submit">
                                                    
                                                    Show
                                                </button>
                                            </td>
                                   

                                    </tr>
                                    <tr>        
                                        <th>Employee No</th>
                                        <th>Employee Name</th>
                                        <th>Department</th>
                                        <th>Date lodging </th>
                                        <th>Date closing</th>
                                        <th>Technician name</th>
                                        <th>Time solve</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                        <c:forEach var="ra" items="${listReport}">
                                            <tr>
                                                <td>${ra.user.id}</td>
                                                <td>${ra.user.fullName}</td>
                                                <td>${ra.dep.depName}</td>
                                                <td>${ra.comp.dateOpen}</td>
                                                <td>${ra.comp.dateClose}</td>
                                                <td>${ra.tech.fullName}</td>
                                                <td>${ra.dateSolve}</td>

                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>


                            </form>


                            <!--PAGE CONTENT ENDS-->
                        </div><!--/.span-->
                    </div><!--/.row-fluid-->
                </div><!--/.page-content-->

                <div class="ace-settings-container" id="ace-settings-container">
                    <div class="btn btn-app btn-mini btn-warning ace-settings-btn" id="ace-settings-btn">
                        <i class="icon-cog bigger-150"></i>
                    </div>

                    <div class="ace-settings-box" id="ace-settings-box">
                        <div>
                            <div class="pull-left">
                                <select id="skin-colorpicker" class="hide">
                                    <option data-class="default" value="#438EB9" />#438EB9
                                    <option data-class="skin-1" value="#222A2D" />#222A2D
                                    <option data-class="skin-2" value="#C6487E" />#C6487E
                                    <option data-class="skin-3" value="#D0D0D0" />#D0D0D0
                                </select>
                            </div>
                            <span>&nbsp; Choose Skin</span>
                        </div>

                        <div>
                            <input type="checkbox" class="ace-checkbox-2" id="ace-settings-header" />
                            <label class="lbl" for="ace-settings-header"> Fixed Header</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace-checkbox-2" id="ace-settings-sidebar" />
                            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace-checkbox-2" id="ace-settings-breadcrumbs" />
                            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace-checkbox-2" id="ace-settings-rtl" />
                            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                        </div>
                    </div>
                </div><!--/#ace-settings-container-->
            </div><!--/.main-content-->
        </div><!--/.main-container-->

        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-small btn-inverse">
            <i class="icon-double-angle-up icon-only bigger-110"></i>
        </a>

        <!--basic scripts-->

        <!--[if !IE]>-->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

        <!--<![endif]-->

        <!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

        <!--[if !IE]>-->

        <script type="text/javascript">
                                                    window.jQuery || document.write("<script src='${baseURL}/assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
        </script>

        <!--<![endif]-->

        <!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='${baseURL}/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

        <script type="text/javascript">
            if ("ontouchend" in document)
                document.write("<script src='${baseURL}/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
        </script>
        <script src="${baseURL}/assets/js/bootstrap.min.js"></script>

        <!--page specific plugin scripts-->

        <script src="${baseURL}/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="${baseURL}/assets/js/jquery.ui.touch-punch.min.js"></script>
        <script src="${baseURL}/assets/js/jquery.knob.min.js"></script>
        <script src="${baseURL}/assets/js/jquery.autosize-min.js"></script>
        <script src="${baseURL}/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
        <script src="${baseURL}/assets/js/jquery.maskedinput.min.js"></script>
        <script src="${baseURL}/assets/js/markdown/markdown.min.js"></script>
        <script src="${baseURL}/assets/js/markdown/bootstrap-markdown.min.js"></script>
        <script src="${baseURL}/assets/js/jquery.hotkeys.min.js"></script>
        <script src="${baseURL}/assets/js/bootstrap-wysiwyg.min.js"></script>
        <script src="${baseURL}/assets/js/bootstrap-colorpicker.min.js"></script>
        <script src="${baseURL}/assets/js/bootbox.min.js"></script>
        <script src="${baseURL}/assets/js/bootstrap-tag.min.js"></script>
        <script src="${baseURL}/assets/js/chosen.jquery.min.js"></script>
        <script src="${baseURL}/assets/js/fuelux/fuelux.spinner.min.js"></script>
        <script src="${baseURL}/assets/js/date-time/bootstrap-datepicker.min.js"></script>
        <script src="${baseURL}/assets/js/date-time/bootstrap-timepicker.min.js"></script>
        <script src="${baseURL}/assets/js/date-time/moment.min.js"></script>
        <script src="${baseURL}/assets/js/date-time/daterangepicker.min.js"></script>






        <!--ace scripts-->

        <script src="${baseURL}/assets/js/ace-elements.min.js"></script>
        <script src="${baseURL}/assets/js/ace.min.js"></script>

        <!--inline scripts related to this page-->
        <script type="text/javascript">
            $(function () {

                function showErrorAlert(reason, detail) {
                    var msg = '';
                    if (reason === 'unsupported-file-type') {
                        msg = "Unsupported format " + detail;
                    }
                    else {
                        console.log("error uploading file", reason, detail);
                    }
                    $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
                            '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
                }

                //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

                //but we want to change a few buttons colors for the third style
                $('#editor1').ace_wysiwyg({
                    toolbar:
                            [
                                'font',
                                null,
                                'fontSize',
                                null,
                                {name: 'bold', className: 'btn-info'},
                                {name: 'italic', className: 'btn-info'},
                                {name: 'strikethrough', className: 'btn-info'},
                                {name: 'underline', className: 'btn-info'},
                                null,
                                {name: 'insertunorderedlist', className: 'btn-success'},
                                {name: 'insertorderedlist', className: 'btn-success'},
                                {name: 'outdent', className: 'btn-purple'},
                                {name: 'indent', className: 'btn-purple'},
                                null,
                                {name: 'justifyleft', className: 'btn-primary'},
                                {name: 'justifycenter', className: 'btn-primary'},
                                {name: 'justifyright', className: 'btn-primary'},
                                {name: 'justifyfull', className: 'btn-inverse'},
                                null,
                                {name: 'createLink', className: 'btn-pink'},
                                {name: 'unlink', className: 'btn-pink'},
                                null,
                                {name: 'insertImage', className: 'btn-success'},
                                null,
                                'foreColor',
                                null,
                                {name: 'undo', className: 'btn-grey'},
                                {name: 'redo', className: 'btn-grey'}
                            ],
                    'wysiwyg': {
                        fileUploadError: showErrorAlert
                    }
                }).prev().addClass('wysiwyg-style2');



                $('#editor2').css({'height': '200px'}).ace_wysiwyg({
                    toolbar_place: function (toolbar) {
                        return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
                    },
                    toolbar:
                            [
                                'bold',
                                {name: 'italic', title: 'Change Title!', icon: 'icon-leaf'},
                                'strikethrough',
                                'underline',
                                null,
                                'insertunorderedlist',
                                'insertorderedlist',
                                null,
                                'justifyleft',
                                'justifycenter',
                                'justifyright'
                            ],
                    speech_button: false
                });


                $('[data-toggle="buttons-radio"]').on('click', function (e) {
                    var target = $(e.target);
                    var which = parseInt($.trim(target.text()));
                    var toolbar = $('#editor1').prev().get(0);
                    if (which == 1 || which == 2 || which == 3) {
                        toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g, '');
                        if (which == 1)
                            $(toolbar).addClass('wysiwyg-style1');
                        else if (which == 2)
                            $(toolbar).addClass('wysiwyg-style2');
                    }
                });





                //Add Image Resize Functionality to Chrome and Safari
                //webkit browsers don't have image resize functionality when content is editable
                //so let's add something using jQuery UI resizable
                //another option would be opening a dialog for user to enter dimensions.
                if (typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase())) {

                    var lastResizableImg = null;
                    function destroyResizable() {
                        if (lastResizableImg == null)
                            return;
                        lastResizableImg.resizable("destroy");
                        lastResizableImg.removeData('resizable');
                        lastResizableImg = null;
                    }

                    var enableImageResize = function () {
                        $('.wysiwyg-editor')
                                .on('mousedown', function (e) {
                                    var target = $(e.target);
                                    if (e.target instanceof HTMLImageElement) {
                                        if (!target.data('resizable')) {
                                            target.resizable({
                                                aspectRatio: e.target.width / e.target.height,
                                            });
                                            target.data('resizable', true);

                                            if (lastResizableImg != null) {//disable previous resizable image
                                                lastResizableImg.resizable("destroy");
                                                lastResizableImg.removeData('resizable');
                                            }
                                            lastResizableImg = target;
                                        }
                                    }
                                })
                                .on('click', function (e) {
                                    if (lastResizableImg != null && !(e.target instanceof HTMLImageElement)) {
                                        destroyResizable();
                                    }
                                })
                                .on('keydown', function () {
                                    destroyResizable();
                                });
                    }

                    enableImageResize();

                    /**
                     //or we can load the jQuery UI dynamically only if needed
                     if (typeof jQuery.ui !== 'undefined') enableImageResize();
                     else {//load jQuery UI if not loaded
                     $.getScript($assets+"/js/jquery-ui-1.10.3.custom.min.js", function(data, textStatus, jqxhr) {
                     if('ontouchend' in document) {//also load touch-punch for touch devices
                     $.getScript($assets+"/js/jquery.ui.touch-punch.min.js", function(data, textStatus, jqxhr) {
                     enableImageResize();
                     });
                     } else	enableImageResize();
                     });
                     }
                     */
                }


            });
        </script>
        <script type="text/javascript">
            $(function () {
                $('#id-disable-check').on('click', function () {
                    var inp = $('#form-input-readonly').get(0);
                    if (inp.hasAttribute('disabled')) {
                        inp.setAttribute('readonly', 'true');
                        inp.removeAttribute('disabled');
                        inp.value = "This text field is readonly!";
                    }
                    else {
                        inp.setAttribute('disabled', 'disabled');
                        inp.removeAttribute('readonly');
                        inp.value = "This text field is disabled!";
                    }
                });


                $(".chzn-select").chosen();

                $('[data-rel=tooltip]').tooltip({container: 'body'});
                $('[data-rel=popover]').popover({container: 'body'});

                $('textarea[class*=autosize]').autosize({append: "\n"});
                $('textarea[class*=limited]').each(function () {
                    var limit = parseInt($(this).attr('data-maxlength')) || 100;
                    $(this).inputlimiter({
                        "limit": limit,
                        remText: '%n character%s remaining...',
                        limitText: 'max allowed : %n.'
                    });
                });

                $.mask.definitions['~'] = '[+-]';
                $('.input-mask-date').mask('99/99/9999');
                $('.input-mask-phone').mask('(999) 999-9999');
                $('.input-mask-eyescript').mask('~9.99 ~9.99 999');
                $(".input-mask-product").mask("a*-999-a999", {placeholder: " ", completed: function () {
                        alert("You typed the following: " + this.val());
                    }});



                $("#input-size-slider").css('width', '200px').slider({
                    value: 1,
                    range: "min",
                    min: 1,
                    max: 6,
                    step: 1,
                    slide: function (event, ui) {
                        var sizing = ['', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];
                        var val = parseInt(ui.value);
                        $('#form-field-4').attr('class', sizing[val]).val('.' + sizing[val]);
                    }
                });

                $("#input-span-slider").slider({
                    value: 1,
                    range: "min",
                    min: 1,
                    max: 11,
                    step: 1,
                    slide: function (event, ui) {
                        var val = parseInt(ui.value);
                        $('#form-field-5').attr('class', 'span' + val).val('.span' + val).next().attr('class', 'span' + (12 - val)).val('.span' + (12 - val));
                    }
                });


                $("#slider-range").css('height', '200px').slider({
                    orientation: "vertical",
                    range: true,
                    min: 0,
                    max: 100,
                    values: [17, 67],
                    slide: function (event, ui) {
                        var val = ui.values[$(ui.handle).index() - 1] + "";

                        if (!ui.handle.firstChild) {
                            $(ui.handle).append("<div class='tooltip right in' style='display:none;left:15px;top:-8px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>");
                        }
                        $(ui.handle.firstChild).show().children().eq(1).text(val);
                    }
                }).find('a').on('blur', function () {
                    $(this.firstChild).hide();
                });

                $("#slider-range-max").slider({
                    range: "max",
                    min: 1,
                    max: 10,
                    value: 2
                });

                $("#eq > span").css({width: '90%', 'float': 'left', margin: '15px'}).each(function () {
                    // read initial values from markup and remove that
                    var value = parseInt($(this).text(), 10);
                    $(this).empty().slider({
                        value: value,
                        range: "min",
                        animate: true

                    });
                });


                $('#id-input-file-1 , #id-input-file-2').ace_file_input({
                    no_file: 'No File ...',
                    btn_choose: 'Choose',
                    btn_change: 'Change',
                    droppable: false,
                    onchange: null,
                    thumbnail: false //| true | large
                            //whitelist:'gif|png|jpg|jpeg'
                            //blacklist:'exe|php'
                            //onchange:''
                            //
                });

                $('#id-input-file-3').ace_file_input({
                    style: 'well',
                    btn_choose: 'Drop files here or click to choose',
                    btn_change: null,
                    no_icon: 'icon-cloud-upload',
                    droppable: true,
                    thumbnail: 'small'
                            //,icon_remove:null//set null, to hide remove/reset button
                            /**,before_change:function(files, dropped) {
                             //Check an example below
                             //or examples/file-upload.html
                             return true;
                             }*/
                            /**,before_remove : function() {
                             return true;
                             }*/
                    ,
                    preview_error: function (filename, error_code) {
                        //name of the file that failed
                        //error_code values
                        //1 = 'FILE_LOAD_FAILED',
                        //2 = 'IMAGE_LOAD_FAILED',
                        //3 = 'THUMBNAIL_FAILED'
                        //alert(error_code);
                    }

                }).on('change', function () {
                    //console.log($(this).data('ace_input_files'));
                    //console.log($(this).data('ace_input_method'));
                });


                //dynamically change allowed formats by changing before_change callback function
                $('#id-file-format').removeAttr('checked').on('change', function () {
                    var before_change
                    var btn_choose
                    var no_icon
                    if (this.checked) {
                        btn_choose = "Drop images here or click to choose";
                        no_icon = "icon-picture";
                        before_change = function (files, dropped) {
                            var allowed_files = [];
                            for (var i = 0; i < files.length; i++) {
                                var file = files[i];
                                if (typeof file === "string") {
                                    //IE8 and browsers that don't support File Object
                                    if (!(/\.(jpe?g|png|gif|bmp)$/i).test(file))
                                        return false;
                                }
                                else {
                                    var type = $.trim(file.type);
                                    if ((type.length > 0 && !(/^image\/(jpe?g|png|gif|bmp)$/i).test(type))
                                            || (type.length == 0 && !(/\.(jpe?g|png|gif|bmp)$/i).test(file.name))//for android's default browser which gives an empty string for file.type
                                            )
                                        continue;//not an image so don't keep this file
                                }

                                allowed_files.push(file);
                            }
                            if (allowed_files.length == 0)
                                return false;

                            return allowed_files;
                        }
                    }
                    else {
                        btn_choose = "Drop files here or click to choose";
                        no_icon = "icon-cloud-upload";
                        before_change = function (files, dropped) {
                            return files;
                        }
                    }
                    var file_input = $('#id-input-file-3');
                    file_input.ace_file_input('update_settings', {'before_change': before_change, 'btn_choose': btn_choose, 'no_icon': no_icon})
                    file_input.ace_file_input('reset_input');
                });




                $('#spinner1').ace_spinner({value: 0, min: 0, max: 200, step: 10, btn_up_class: 'btn-info', btn_down_class: 'btn-info'})
                        .on('change', function () {
                            //alert(this.value)
                        });
                $('#spinner2').ace_spinner({value: 0, min: 0, max: 10000, step: 100, icon_up: 'icon-caret-up', icon_down: 'icon-caret-down'});
                $('#spinner3').ace_spinner({value: 0, min: -100, max: 100, step: 10, icon_up: 'icon-plus', icon_down: 'icon-minus', btn_up_class: 'btn-success', btn_down_class: 'btn-danger'});



                $('.date-picker').datepicker().next().on(ace.click_event, function () {
                    $(this).prev().focus();
                });
                $('#id-date-range-picker-1').daterangepicker().prev().on(ace.click_event, function () {
                    $(this).next().focus();
                });

                $('#timepicker1').timepicker({
                    minuteStep: 1,
                    showSeconds: true,
                    showMeridian: false
                })

                $('#colorpicker1').colorpicker();
                $('#simple-colorpicker-1').ace_colorpicker();


                $(".knob").knob();


                //we could just set the data-provide="tag" of the element inside HTML, but IE8 fails!
                var tag_input = $('#form-field-tags');
                if (!(/msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase())))
                    tag_input.tag({placeholder: tag_input.attr('placeholder')});
                else {
                    //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
                    tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' + tag_input.val() + '</textarea>').remove();
                    //$('#form-field-tags').autosize({append: "\n"});
                }


                /////////
                $('#modal-form input[type=file]').ace_file_input({
                    style: 'well',
                    btn_choose: 'Drop files here or click to choose',
                    btn_change: null,
                    no_icon: 'icon-cloud-upload',
                    droppable: true,
                    thumbnail: 'large'
                })

                //chosen plugin inside a modal will have a zero width because the select element is originally hidden
                //and its width cannot be determined.
                //so we set the width after modal is show
                $('#modal-form').on('show', function () {
                    $(this).find('.chzn-container').each(function () {
                        $(this).find('a:first-child').css('width', '200px');
                        $(this).find('.chzn-drop').css('width', '210px');
                        $(this).find('.chzn-search input').css('width', '200px');
                    });
                })
                /**
                 //or you can activate the chosen plugin after modal is shown
                 //this way select element has a width now and chosen works as expected
                 $('#modal-form').on('shown', function () {
                 $(this).find('.modal-chosen').chosen();
                 })
                 */

            });
        </script>

    </body>
</html>
